<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_CSS3D-透视效果</title>
  <!-- 
  CSS3 的透视效果（Perspective）是用于创建三维空间视觉效果的一种技术。通过透视效果，开发者可以让元素在三维空间中看起来更具深度感，从而增强用户界面的立体感。
  1. 基本概念
  - 透视效果：透视效果模拟了人眼观察三维物体的方式。它通过调整元素与观察者之间的距离来影响元素的深度感，使得远离观察者的物体看起来更小，靠近观察者的物体看起来更大。

  2. 关键属性
  -  perspective ：用于设置透视效果的属性，定义了观察者与 z=0 平面的距离。该值越小，透视效果越强烈，物体的深度感越明显。
  .container {
        perspective: 1000px; /* 设置透视距离 */
    }
  -  perspective-origin ：定义透视的起点，默认值是元素的中心。可以通过设置  perspective-origin  来改变观察者的视角。
  .container {
        perspective-origin: 50% 50%; /* 设置透视起点为元素中心 */
    }
  3. 使用示例
  以下是一个简单的示例，展示如何使用 CSS3 透视效果：
  <div class="container">
      <div class="box">3D Box</div>
  </div>
  .container {
      perspective: 800px; /* 设置透视效果 */
  }

  .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transform: rotateY(45deg); /* 进行旋转以展示透视效果 */
      transition: transform 0.5s; /* 添加过渡效果 */
  }

  .box:hover {
      transform: rotateY(0deg); /* 鼠标悬停时恢复到初始状态 */
  }
  4. 注意事项
  - 性能问题：使用透视效果可能会影响性能，尤其是在移动设备上。因此，建议在复杂场景中谨慎使用。
  - 浏览器兼容性：确保在不同浏览器中测试透视效果，因为某些旧版本的浏览器可能不完全支持 CSS3 的 3D 变换。

  5. 总结
  CSS3 的透视效果为网页设计提供了强大的工具，使得开发者能够创建富有立体感的视觉效果。通过合理设置  perspective  和  perspective-origin  属性，可以实现生动的三维效果，从而增强用户体验。掌握透视效果的使用，可以帮助开发者设计出更加吸引人的用户界面。
  -->
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .parent-perspective-effect {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: lightblue;

      /* 在父元素添加透视效果 */
      perspective: 200px;
    }

    .perspective {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: lightcoral;
      /* 形变 */
      transform: rotateY(65deg);
    }

    .current-perspective-effect {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: lightblue;
      /* 在当前元素中直接添加透视效果 */
      transform: perspective(200px) rotateY(55deg);
    }
  </style>
</head>
<body>

  <h3>01-3D-透视效果-父元素中使用透视</h3>
  <div class="parent-perspective-effect">
    <div class="perspective">perspective</div>
  </div>
  
  <h3>02-3D-透视效果-当前元素使用透视</h3>
  <div class="current-perspective-effect">perspective</div>
  
</body>
</html>